<!--
 * @Author: 清羽
 * @Date: 2022-08-21 22:47:11
 * @LastEditTime: 2022-09-02 10:08:46
 * @LastEditors: you name
 * @Description: 
-->
<!-- add 页 -->
<template>
  <div class="app-container">
    <div class="main">

      <Four v-if="this.$route.query.productId" />

      <el-form
        v-else
        ref="form"
        label-width="150px"
      >

        <el-form-item label="商品名称:">
          <el-input
            @change="submitProductName"
            v-model="productName"
          ></el-input>
        </el-form-item>
      </el-form>

    </div>

  </div>

</template>

<script>
import Four from './components/addStepFour'
import { addProduct } from '@/api/business/product'
export default {
  name: "add",
  data () {
    return {
      productName: ''
    }
  },
  components: { Four },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  // 函数
  methods: {
    submitProductName () {
      const data = { productName: this.productName }
      addProduct(data).then(response => {
        this.productId = response.data.data._id
        this.$router.push({
          path: `/product/add`,
          query: {
            productId: this.productId
          }
        })
      })
    }

  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.main {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // height: 80vh;
  // min-width: 84vw;
  margin-top: 20px;
  .el-form {
    width: 50rem;
    // height: 500px;
  }
}
</style>